<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <link rel="stylesheet" href="./style/index.css">
    <script src="./echarts/echarts.common.min.js"></script>

</head>
<body>

<el-container style="height: 100%;" id="app">
    <el-aside :class="[{'index-el-side': (isCollapse == true)},{'index-el-side1':(isCollapse == false)}]" style="background-color: rgb(0,21,41)">

        <el-menu :default-openeds="openIndex" default-active="activeMenuIndex" background-color="#001529" :collapse="isCollapse"
                 text-color="#eeeeee" active-text-color="#eeeeee" unique-opened="uniqueOpened"
                 class="el-menu-vertical-demo" @select="handleSelect">
            <el-menu-item index="0" style="padding: 0;height: 60px">
                <span slot="title">

                    <div style="height: 60px;text-align: center;background-color: rgb(0,33,64)">
                        <el-row>
                          <el-col :span="8">
                              <img src="./image/default.jpg" style="width: 50px;">
                          </el-col>
                          <el-col :span="16" style="text-align: left">
                              <h1 style="color: white;margin: 0;font-size: 40px;font-family: monospace">Bai Cai</h1>
                          </el-col>
                        </el-row>
                    </div>
                </div>
                </span>
            </el-menu-item>
            <el-submenu index="1">
                <template slot="title"><i class="el-icon-message"></i>dashboard</template>
                <el-menu-item index="1-1">工作台</el-menu-item>
                <el-menu-item index="1-2">周报</el-menu-item>
            </el-submenu>
            <el-submenu index="2">
                <template slot="title"><i class="el-icon-menu"></i>应用</template>
                <el-menu-item index="2-1" >应用管理</el-menu-item>
                <el-menu-item index="2-2" >代码质量</el-menu-item>
            </el-submenu>
            <el-submenu index="3">
                <template slot="title"><i class="el-icon-setting"></i>模板</template>
                <el-menu-item index="3-1" >项目排期</el-menu-item>
            </el-submenu>
            <el-submenu index="4">
                <template slot="title"><i class="el-icon-setting"></i>关于</template>
                <el-menu-item index="4-1">关于我们</el-menu-item>
            </el-submenu>
        </el-menu>
    </el-aside>

    <el-container>
        <el-header class="index-el-header">
            <el-row>
                <el-col :span="12" style="line-height: 60px">
                    <img src="./image/close.png" style="width: 24px" @click="switchMenuStatus">
                </el-col>
                <el-col :span="12" style="text-align: right">
                    <img src="./image/tip.png" style="width: 16px">
                    <el-badge is-dot class="item">

                    </el-badge>

                    <img src="./image/default.jpg" style="width: 24px;margin-left: 30px">
                    <span style="font-size: 18px;margin-left: 10px">王小虎</span>
                </el-col>
            </el-row>
            <div style="background-color: white;height: 140px;margin-top: 10px">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item> <a href="#" @click="toIndex">首页</a></el-breadcrumb-item>
                    <el-breadcrumb-item v-show="activeMenuIndex == '1-1'">工作台</el-breadcrumb-item>
                    <el-breadcrumb-item v-show="activeMenuIndex == '1-2'">周报</el-breadcrumb-item>
                    <el-breadcrumb-item v-show="activeMenuIndex == '2-1'">应用管理</el-breadcrumb-item>
                    <el-breadcrumb-item v-show="activeMenuIndex == '2-2'">代码质量</el-breadcrumb-item>
                    <el-breadcrumb-item v-show="activeMenuIndex == '3-1'">项目排期</el-breadcrumb-item>
                    <el-breadcrumb-item v-show="activeMenuIndex == '4-1'">关于我们</el-breadcrumb-item>
                    <el-breadcrumb-item v-show="(activeMenuIndex == '4-1' && optionsCode=='memberInfo')">成员信息</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </el-header>

       <el-main class="index-el-main">
           <el-card class="box-card" style="padding: 10px 30%">
               <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" >
                   <el-form-item label="头像" prop="headUrl">
                       <el-upload
                               class="avatar-uploader"
                               action="https://jsonplaceholder.typicode.com/posts/"
                               :show-file-list="false"
                               :on-success="handleAvatarSuccess"
                               :before-upload="beforeAvatarUpload">
                           <img v-if="imageUrl" :src="imageUrl" class="avatar">
                           <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                       </el-upload>
                   </el-form-item>
                   <el-form-item label="姓名" prop="name">
                       <el-input v-model="ruleForm.name"></el-input>
                   </el-form-item>
                   <el-form-item label="邮箱" prop="email">
                       <el-input v-model="ruleForm.email"></el-input>
                   </el-form-item>
                   <el-form-item label="初始密码" prop="password">
                       <el-input type="password" v-model="ruleForm.password"></el-input>
                   </el-form-item>
                   <el-form-item label="手机号" prop="phone">
                       <el-input type='tel' v-model="ruleForm.phone"></el-input>
                   </el-form-item>
                   <el-form-item label="生日" prop="birthday">
                       <div>
                           <el-radio-group v-model="ruleForm.birth_type" size="small">
                               <el-radio-button label="农历"></el-radio-button>
                               <el-radio-button label="阳历" ></el-radio-button>
                           </el-radio-group>
                       </div>
                       <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.birthday" style="width: 100%;"></el-date-picker>
                   </el-form-item>
                   <el-form-item label="部门" prop="department">
                       <el-input v-model="ruleForm.department"></el-input>
                   </el-form-item>
                   <el-form-item label="职务" prop="position">
                       <el-input v-model="ruleForm.position"></el-input>
                   </el-form-item>
                   <el-form-item>
                       <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                       <el-button @click="resetForm('ruleForm')">重置</el-button>
                   </el-form-item>
               </el-form>
           </el-card>

       </el-main>

    </el-container>
</el-container>


<script src="./vue/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            openIndex:['1'],
            activeMenuIndex: '1-1',
            isCollapse:false,
            uniqueOpened:true,
            optionsCode:'',
            imageUrl: '',
            ruleForm: {
                name: '',
                email: '',
                password: '',
                phone : '',
                birthday: '',
                birth_type: '',
                department: '',
                position: '',
                headUrl:''
            },
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                email: [
                    { type:'email',required: true, message: '请填写邮箱', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请填写手机', trigger: 'blur' }
                ],
                birthday: [
                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                ],
                password: [
                    { required: true, message: '请填写密码', trigger: 'blur' },
                    { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
                ],
                birth_type: [
                    {  required: true, message: '请选择日历类型', trigger: 'change' }
                ]
            }
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
            toIndex:function(){
                Vue.set(this.openIndex, 0,'1');
                this.activeMenuIndex = '1-1';
                this.optionsCode = ''
            },
            handleSelect:function(key,keypath){
                Vue.set(this.openIndex, 0,keypath[0]);
                this.activeMenuIndex = key;
                this.optionsCode = ''
            },
            switchMenuStatus:function () {
                this.isCollapse = !this.isCollapse
            },
            handleAvatarSuccess(res, file) {
                console.log(res)
                console.log(file)
                this.imageUrl = URL.createObjectURL(file.raw);
                this.ruleForm.headUrl = file.raw.name
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log(this.ruleForm)
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }

        }
    })
</script>
</body>
</html>